class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            name: '',
            id: 0,
            counts: [],
            start: 1,
            pagesize: 15,
            keyword: "",
        };
    }

    formatlist(list) {
        var listitem = [], wulist = [];
        if (list.length > 0) {
            list.forEach((x, i) => {
                listitem.push(
                    <tr key={i}>
                        <td>{x.name}</td>
                        <td>{x.phone}</td>
                        <td>{x.starttime}-{x.endtime}</td>
                        <td>{x.province + x.city + x.county + x.street}</td>
                        <td>{x.userid > 0 ? "ID:" + x.userid + ",昵称:" + x.nickName : "未绑定店长"}</td>
                        {/* <td>
                            <antd.Switch checked={x.state == "ON" ? true : false} onChange={this.inputchange1.bind(this, "state", x.id)} />
                        </td> */}
                        <td>
                            <antd.Switch checked={x.isrecommend == "1" ? true : false} onChange={this.inputchange1.bind(this, "isrecommend", x.id)} />
                        </td>
                        <td>
                            <div className="czbuttom">
                                <p onClick={this.todetail.bind(this, x.id)}>编辑</p>
                                <p onClick={this.del.bind(this, x.id)}>删除</p>
                            </div>
                        </td>


                    </tr>
                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据 !</p>
            )
        }
        this.setState({ listitem, list, originallist: list, wulist })
    }
    // 编辑
    todetail(e) {
        window.location.href = "./addshop.html?id=" + e;

        // var { list } = this.state;
        // list.forEach(x => {
        //     if (x.id == e) {
        //         this.setState({ id: e, username: x.username, password: '' })
        //     }
        // });
    }

    // 删除
    del(e) {
        let that = this
        antd.Modal.confirm({
            title: '提示',
            icon: "",
            content: '确定删除吗?',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                that.setState({ showloading: 'ON' })
                Shopdel(e, res => {
                    if (res.issuccess == 1) {
                        alert("删除成功")
                        that.freshlist()
                    } else {
                        that.setState({ showloading: '' })
                        alert(res.msg)

                    }
                })
            },
            onCancel() {
                //   console.log('Cancel');
            },
        });
    }



    componentDidMount() {
        this.setState({ showloading: 'ON' })
        this.freshlist()

    }
    freshlist() {
        let { pagesize, start, keyword } = this.state
        Shopgetlist({ pagesize, start, keyword }, res => {
            this.setState({ showloading: '' })
            if (res.issuccess == 1) {
                if (start == 1) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }
        })

    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 0; i < pagecount; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize } = this.state
        start = (e * pagesize) + 1
        this.setState({ pagestart: e, start }, () => {
            this.freshlist()
        })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 1
        this.setState({ pagesize, start }, () => {
            this.freshlist()
        })
    }
    inputchange(prop, e) {
        this.setState({ [prop]: e.target.value })
    }
    inputchange1(prop, id, e) {
        let that = this;
        if (prop == "state") {
            that.setState({ showloading: 'ON' })
            Shopsetstate(id, res => {
                if (res.issuccess == 1) {
                    alert("设置成功")
                    that.freshlist()
                } else {
                    that.setState({ showloading: '' })
                    alert(res.msg)
                }
            })
        } else if (prop == "isrecommend") {
            that.setState({ showloading: 'ON' })
            Shopsetrecommend(id, res => {
                if (res.issuccess == 1) {
                    alert("设置成功")
                    that.freshlist()
                } else {
                    that.setState({ showloading: '' })
                    alert(res.msg)
                }
            })
        }

    }
    search() {
        this.freshlist()
    }
    add() {
        window.location.href = "./addshop.html";

    }
    render() {
        let { listitem, username, keyword } = this.state;

        return (
            <div className="breadLinebox">
                <Loading hidden={this.state.showloading != 'ON'} />

                <div className='panel-default content_wrap'>
                    <div className="breadLine disflexbetween">
                        <div className="img">
                            {/* <img src='./src/01.gif' /> */}
                            店铺管理
                        </div>

                    </div>
                    <div className="disflexbetween">
                        <div className="search disflexwrap">
                            <antd.Input placeholder="请输入店铺名称或店铺电话" allowClear value={keyword} onChange={this.inputchange.bind(this, 'keyword')} className="input" />
                            <p className="button" onClick={this.search.bind(this)} >搜索</p>
                            {/* <p className="pclick" onClick={this.reset.bind(this)} >重置</p> */}
                        </div>
                        <div className="tabletit">
                            <p className="add" onClick={this.add.bind(this)}>新建</p>
                        </div>
                    </div>
                    <div className="contentBox">

                        <table className="tab">
                            <thead>
                                <tr>
                                    <th>店铺名称</th>
                                    <th>店铺电话</th>
                                    <th>营业时间</th>
                                    <th>店铺地址</th>
                                    <th>绑定店长</th>
                                    {/* <th>是否可使用</th> */}
                                    <th>是否推荐</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {this.state.wulist}
                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={this.state.counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={this.state.pagestart} />
                        </div>
                    </div>
                </div>
            </div>


        )


    }
}

ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='shop' height='shop' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)